<template>
  <div class="box-404">
    <svg-icon icon-class="404" class="icon404" />
    <h1>您访问的页面被外星人抓走啦</h1>
    <div class="submit-button-box w100 post-btn-top">
      <button class="submit-button-bg btn-hover" @click="toHome">
        返回首页
      </button>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  name: "404",
  setup() {
    const router = useRouter();

    function toHome() {
      router.push("/");
    }

    return {
     toHome
    };
  },
};
</script>
<style lang="scss" scoped>
.box-404 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon404 {
    font-size: 150px;
    color: red;
    display: block;
    margin-top: 200px;
  }
  h1 {
    font-size: 28px;
    color: #888;
    margin-top: 60px;
  }
}
</style>>
